<template>
  <div>
    <form action="/">
    <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
    </form>
     <p class="history">搜索历史 <span @click="zone()">清空</span> </p>
    <div>
       <span v-for="(item,index) in search" :key="index" class="span" @click="span(item)">
           {{item}}
       </span>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {mapState} from "vuex"
export default {
   data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val){
      Toast(val);
      this.$store.commit("search",val)
      this.value=""
    },
    onCancel(){
      Toast('取消');
    },
    span(item){
        this.value=item
    },
    zone(){
      this.$store.commit("zone")
    }
  },
  computed:{
      ...mapState(["search"])
  }
  
}
</script>

<style>
.span{
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 10px;
    margin: 10px;
    display: inline-block;
}
.history{
    width: 100%;
    height: 50px;
    background: #ccc;
    line-height: 50px;
}
</style>